<template>
	<view class="repair">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="报事报修" :autoBack="true" bgColor="#0B868E" leftIconColor="#fff">
			</u-navbar>

			<view class="con-body">
				<view class="imgvideo">
					<text :class="{video_title : isimg}" @click="totaggle(0)">户内维修</text>
					<text :class="{video_title : !isimg}" @click="totaggle(1)">公区维修</text>
				</view>
				<view class="uni-flex-center">
					<view class="main-service uni-cell-90">
						<!-- <view class="title">维修类型</view> -->
						<view class="user-list">
							<view class="" style="width:100%;margin:0;">
								<u-grid :border="false" col="2">
									<u-grid-item v-for="(item,index) in list" :key="index">
										<view style="margin-bottom:30rpx;">
											<image @click="intoDetail(item)" :src="item.icon"style="width:330rpx;height:165rpx;border-radius: 20rpx;">
											</image>
										</view>
									</u-grid-item>
								</u-grid>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getRepairType
	} from "@/service/configService.js";
	export default {
		data() {
			return {
				showEmpty: false,
				list: [],
				isimg:true,
			}
		},
		onLoad() {
			getRepairType().then(this.getRepairType);
		},
		methods: {
			totaggle:function(num){
				if(num==0){
					this.isimg=true
				}else{
					this.isimg=false
				}
				getRepairType({type:num}).then(this.getRepairType);
			},
			intoDetail(item) {
				this.$u.route({
					url: '/pagesHome/repair/detail',
					params: {
						id: item.id,
						title: item.title,
						name: item.name
					}
				});
			},
			getRepairType(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.list = e.result;
				} else {
					this.showEmpty = true;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#f8f8f8;
	}
	.main-service{
		background-color:transparent;
		box-shadow:none;
	}
	.main-service .title{
		padding-left:0;
		background-position: 0% 85%;
	}
	.main-service1{
		padding:20rpx;
		text-align: center;
		background-color: #fff;
		
	}
	.imgvideo{
		display: block;
		width:95%;
		margin:30rpx auto;
		border:1rpx solid #008987;
		border-radius: 10rpx;
		overflow: hidden;
		text{
			display: inline-block;
			height:60rpx;
			width:50%;
			color:#008987;
			text-align: center;
			line-height: 60rpx;
		}
		.video_title{
			color:#fff;
			background-color: #008987;
		}
	}
</style>
